import React, { Component } from 'react'
import { Layout, Menu, Breadcrumb, Avatar, Dropdown } from 'antd';
import { DownOutlined } from '@ant-design/icons';
// import menuList from '../../router/menu.js'
import { NavLink, Route,Switch } from 'react-router-dom';
import { GetUserLocal, RemoveUserLocal } from "../../common/UserStore.js";
import Home from "../Home";
import { store } from "../../store";
import Tag from "../Tag";

const { SubMenu } = Menu;
const { Header, Content, Sider } = Layout;

export default class index extends Component {
    constructor(props) {
        super(props)
        const user = GetUserLocal();
        this.state = {
            userName: user.username,
            menuList:[]
        }
        store.subscribe(()=>{
            const menuList = store.getState().menuReducer;
            this.setState({menuList})
        })
    }
    menuDown = () => (
        <Menu>
            <Menu.Item>
                <a onClick={this.onLogout.bind(this)}> 退出 </a>
            </Menu.Item>
            <Menu.Item>
                <a> 设置 </a>
            </Menu.Item>
        </Menu>
    );
    // 菜单
    MenuItem = () => {
        return this.state.menuList.map((menu, index) => {
            return (
                <SubMenu key={index} title={menu.meta.title} icon={(menu.iconCls)()}>
                    {menu.children.map((childMenu, idx) => 
                       <Menu.Item key={childMenu.path} icon={(childMenu.iconCls)()}> <NavLink to={childMenu.path}>{childMenu.meta.title}</NavLink> </Menu.Item>)}
                </SubMenu>
            )
        })
    }
    // 退出
    onLogout = (e) => {
        e.preventDefault();
        RemoveUserLocal();
        this.props.history.replace({ pathname: '/login' })
    }
    render() {
        return (
            <Layout style={{ height: '100vh' }}>
                <Header>
                    <h2 style={{ color: 'white', float: "left" }}>后台管理中心</h2>
                    <span style={{ float: "right" }}>
                        <Avatar style={{ backgroundColor: '#f56a00', color: 'white' }}>{this.state.userName}</Avatar>
                        <Dropdown overlay={this.menuDown()}>
                            <a onClick={e => e.preventDefault()}>
                                <DownOutlined style={{ color: 'white', marginLeft: '5px' }} />
                            </a>
                        </Dropdown>
                    </span>
                </Header>
                <Layout>
                    <Sider width={200}>
                        <Menu
                            theme='light'
                            mode="inline"
                            defaultSelectedKeys={[0]}
                            defaultOpenKeys={[0]}
                            style={{ height: '100%', borderRight: 0 }}>
                            {this.MenuItem()}
                        </Menu>
                    </Sider>
                    <Layout style={{ padding: '0 24px 24px' }}>
                        <Breadcrumb style={{ margin: '16px 0' }}>
                            <Breadcrumb.Item>主界面</Breadcrumb.Item>
                            <Breadcrumb.Item>列表</Breadcrumb.Item>
                        </Breadcrumb>
                        <Tag/>
                        <Content style={{ padding: 24, margin: 0, minHeight: 280, }} >

                            <Switch>
                                <Route exact path='/main' component={Home}></Route>
                                {this.state.menuList.map((route, i) => (
                                    route.children.map((chrildRoute, index) => <Route
                                        key={index}
                                        path={chrildRoute.path}
                                        component={chrildRoute.component}
                                    />)
                                ))}
                            </Switch>
                        </Content>
                    </Layout>
                </Layout>
            </Layout>
        )
    }
}
